<template>
  <!-- 饼图--双层-有间隙 -->
  <div class="chartPie" ref="topRight"></div>
</template>

<script>
export default {
  components: {},
  props: ['chartData'],
  data () {
    return {}
  },
  computed: {},
  watch: {
    'chartData': {
      handler() {
        if (this.chartData.length > 0) {
          this.getEchartData();
        }
      },
      deep: true,
    }
  },
  created () {},
  mounted () {
    console.log('chartData:',this.chartData);
    this.getEchartData()
  },
  methods: {
    getEchartData(){
      let chart = this.$echarts.init(this.$refs.topRight);
      let data = this.chartData;
      let total = parseInt(data.reduce((accumulator, current) => accumulator + current.value1, 0).toFixed(2));
      console.log('total::', total);

      let colorList1 = [
        'rgba(80, 195, 85, 1)','rgba(63, 153, 255, 1)','rgba(227, 145, 75, 1)',
      ]
      let colorList2 = [
        'rgba(80, 195, 85, 0.3)','rgba(63, 153, 255, 0.3)','rgba(227, 145, 75, 0.3)',
      ]
      let option = {
        title: [
          {
            text: total + "%",
            x: "10%",
            y: "35%",
            textStyle: {
              fontSize: 28,
              fontWeight: "bolder",
              color: "#0787FF",
              padding: [0, 0, 10, 0],
            },
          },
          {
            text: "满意度",
            x: "12%",
            y: "48%",
            textStyle: {
              fontSize: 16,
              color: "#1D4A77",
              padding: [10, 0, 0, 0],
              lineHeight: 40,
            },
          },
        ],
        legend: {
          type: "scroll",
          pageIconSize: 14,
          pageButtonItemGap: 1,
          left: "50%",
          orient: "vertical",
          top: "15%",
          icon: "circle",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
          formatter: function (name) {
            for (var i = 0; i < data.length; i++) {
              if (name == data[i].name) {
                return `{a|${name}} {b|${data[i].value} %}`;
              }
            }
          },
          textStyle: {
            rich: {
              a: {
                width: 70,
                color: "#1D4A77",
                fontSize: 16,
              },
              b: {
                width: 40,
                color: "#0286CB",
                fontSize: 20,
              },
            },
          },
        },
        series: [
          {
            // 最外圆环
            type: 'pie',
            zlevel: 1,
            silent: true, //取消高亮
            radius: ['65%', '78%'],
            center: ['20%', '50%'],
            itemStyle: {
              // 设置图元的颜色
              color: function (params) {
                return colorList1[params.dataIndex % colorList1.length];
              }
            },
            label: {show: false},
            data: this.chartData
          },
          {
            // 饼图圈
            type: 'pie',
            zlevel: 3,
            radius: ['55%', '68%'],
            center: ['20%', '50%'],
            itemStyle: {
              // 设置图元的颜色
              color: function (params) {
                return colorList2[params.dataIndex % colorList2.length];
              }
            },
            label: {show: false},
            data: this.chartData
          },
        ],
      };
      chart.setOption(option);
      // 大屏适配
      window.addEventListener("resize", function () {
        chart.resize();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.chartPie{
  width: 100%;
  height: 100%;
}
</style>